<template>
	<view class="activate_card_Warp">
		<Header leftPathType="switchTab" leftPath="/pages/card/card" title="实体卡激活"/>
		<view class="activate_card_content">
			<view class="content_select_card_comm">
				<view class="select_card_left">
					<up-image :src="selectCard.cardImg" width="90" height="50" bgColor="#f1f6ff00" radius="6"></up-image>
					<view class="select_card_left_info">
						<view class="select_card_left_title">{{selectCard.name}}</view>
						<view class="select_card_left_value">{{selectCard.cardNo}}</view>
					</view>
				</view>
				<view></view>
			</view>
			<view class="form_content_item">
				<view class="form_content_item_title">邮箱</view>
				<up-input
				    placeholder="请选择卡片获取邮箱"
				    border="surround"
				    v-model="selectCard.ownerEmail"
					:customStyle="inputCss"
					disabled
				>
				</up-input>
				<view class="email_msg_warp">注：激活码24小时有效，失效后请联系客服{{CUSTOMER_SERVICE_PHONE_NUMBER}}</view>
			</view>
			<view class="form_content_item">
				<view class="form_content_item_title">激活码</view>
				<up-input
				    placeholder="请输入激活码"
				    border="surround"
				    v-model="form.activateCode"
					:customStyle="inputCss"
					type="number"
				>
				</up-input>
			</view>
			<view class="form_content_item">
				<view class="form_content_item_title">PIN</view>
				<up-input
				    placeholder="请输入PIN"
				    border="surround"
				    v-model="form.password"
					:customStyle="inputCss"
					type="number"
				>
				</up-input>
			</view>
			
			<view class="but_comm_warp" @click="activateOk">
				激活
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	// import CardComm from '@/components/card_comm.vue';
	import { activateCard,getMyCardsDetail } from "@/api/card.js"
	import { CUSTOMER_SERVICE_PHONE_NUMBER } from "@/utils/config.js"
	
	export default {
		components:{Header},
		computed: {
		    CUSTOMER_SERVICE_PHONE_NUMBER() {
		      return CUSTOMER_SERVICE_PHONE_NUMBER;
		    },
		},
		data() {
			return {
				cardId:0,// 第三方卡ID
				form:{
					id:0,// ID
					activateCode:null,// 激活码
					password:null,// 卡PIN
				},
				selectCard:{},// 选中的卡片
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
			};
		},
		onLoad(option) {
			const id = option.id;
			if(id && id !==0){
				this.form.id = id;
				this.getCategoryDetailFun();
			}
		},
		methods: {
			async getCategoryDetailFun(){
				const params = {
					id:this.form.id,
				}
				const resp = await getMyCardsDetail(params);
				console.log("respresprespresp",resp);
				if(resp && resp.bizcode === 100){
					this.selectCard = resp.data;
				}
			},
			async activateOk(){
				const form = this.form;
				console.log("formformform",form);
				if(!form.password){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入PIN",
					});
					return false;
				}
				if(!form.activateCode){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入激活码",
					});
					return false;
				}
				const resp = await activateCard(form);
				if(resp && resp.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: "激活成功",
					});
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/card/card",
						})
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss">
.activate_card_Warp{
	height: calc(100vh - 0rpx);
	.activate_card_content{
		padding: 30rpx;
	}
	.form_content_item{
		margin-top: 20rpx;
	}
	.email_msg_warp{
		color:red;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
}
</style>
